Fondo animado con jQuery

No sé si recordarán aquella guía básica sobre Google Wave al final de la entrada comentaba que me había gustado la página de mantenimiento y que estaba creada con jQuery.

El efecto recuerda aquél otro de Background JQuery pero en mi opinión resulta mucho más llamativo y atractivo.

Para hacerlo busqué información y llegué a Webmove hay más sitios que hablan del sistema utilizado así que tomando una idea de aquí otra de más allá, alguna imagen prestada y otras que hice con el Paint el resultado es lo que veremos más adelante.

Para que el fondo animado funcione necesitamos jquery.easing.1.3.js es necesario descargarlo y alojarlo en nuestro servidor (nuestro servidor es aquel que utilizamos para subir archivos que no es posible subir a Blogger)

Una vez tenemos el archivo alojado copiamos la url y nos dirigimos a plantilla Edición de HTML justo antes de </head> allí añadimos lo siguiente:

<script src='url-de-tu-archivo-jquery.easing.1.3.js' type='text/javascript'/>

Donde dice url-de-tu-archivo-jquery.easing.1.3.js lo sustituimos por la url de nuestro archivo alojado.

Justo después pegamos el contenido del siguiente archivo de texto que contiene otros dos scripts.

Nos falta añadir los estilos para el fondo de los motivos que harán la animación. Antes de ]]></b:skin> pegamos los estilos.

#wrapper{ margin:0px auto; width:100%; }

#content{ position:relative; width:100%; height:100%; }

#sol{ position:absolute; top:-15px; left:330px; z-index:-8; }

#pajaros{ position:absolute; top:10px; left: 0px; z-index:-5; }

#nube1{ position:absolute; top:200px; left: 0px; z-index:-5; }

#nubes2{ position:absolute; top:60px; left: 0px; z-index:-5; }

Guardamos los cambios y nos situamos en plantilla de diseño.
En el espacio del crosscol editamos un nuevo gadget HTML/Javascript.

Si no tenemos el crosscol habilitado buscamos en la plantilla:

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

Donde dice no cambiamos a yes

En ese nuevo gadget añadimos las imágenes que podemos crear con cualquier editor, para facilitar un poco la tarea las he preparado en un zip

Descargamos el zip y subimos las imágenes al servidor (ver la forma de utilizar Blogger como servidor de imágenes) para más tarde añadir la url en el sitio que corresponda del gadget.

<div id="sol">

<img src="url-imagen-sol.png"/>

</div>

<div id="pajaros">

<img src="url-imagen-pájaros.png"/>

</div>

<div id="nube1">

<img src="url-imagen-nube1.png"/>

</div>

<div id="nubes2">

<img src="url-imagen-nubes2.png"/>

</div>

En el mismo zip viene incluida la imagen de fondo que utilicé para el ejemplo también podemos utilizar como hice yo grad color la imagen de fondo la añadimos en body junto a unas líneas de código para posicionar la imagen.

body {

background:#E0A3E6 url(url-imagen-fondo)repeat-x;
background-position:top;

......

......

......

}

Si el efecto lo queremos añadir sin imagen de fondo omitimos la imagen y dejamos el color de fondo.

body {

background-color:#E0A3E6;

......

......

......

}

El resultado de seguir estos pasos pueden verlo haciendo click en la siguiente imagen, poquito a poco personalizaremos la plantilla.